<template>
	<view>
		<uni-nav-bar title="求购单订单详情" left-icon="back" :status-bar="true" @clickLeft="$tab.back()" :border="false"
			background-color="#FA4146" :fixed="true" color="#FFF">
		</uni-nav-bar>

		<view class="px-20 mt-32">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="px-16 py-24 bg-white border-r12 fontS-28 mb-16 po-r" v-if="list.length > 0">
					<!-- 求购单 -->
					<view class="flex align-center justify-between">
						<view class="">
							{{ list[0].demandNo }}
						</view>
						<view class="">
							求购单
						</view>
					</view>

					<view class="mt-24 mb-24">
						<u-line color="#F4F4F4"></u-line>
					</view>

					<view class="flex align-center justify-between">
						<view class="">
							<view class="text-32 font-700">
								订单单价：{{ list[0].price }}
							</view>
							<view class="text-32 font-700">
								总求购量：{{ list[0].nums }}
							</view>
						</view>

						<view class="" :style="{
                color:
                  list[0].state == 1
                    ? '#FF820E'
                    : list[0].state == 3
                    ? '#CDCDCD'
                    : list[0].state == 4
                    ? '#CDCDCD'
                    : '#FF820E',
              }">
							{{ stateTxt(list[0],1) }}
						</view>
					</view>

					<view class="mt-24 flex align-center justify-between text-36">
						<view class="flex align-center">
							<view class="text-grey"> 待付款： </view>
							<view class=""> {{ list[0].noPaymentNum }}笔 </view>
							<image src="http://img.kxjb1319.com/gsgxStatic/Marketlist/icon_xiangqign@2x.png" mode=""
								style="width: 36rpx; height: 36rpx"></image>
						</view>
						<view class="flex align-center">
							<view class="text-grey"> 待确认： </view>
							<view class=""> {{ list[0].noConfirmNum }}笔 </view>
							<image src="http://img.kxjb1319.com/gsgxStatic/Marketlist/icon_xiangqign@2x.png" mode=""
								style="width: 36rpx; height: 36rpx"></image>
						</view>
					</view>

					<view class="flex align-center mt-48">
						<view class="text-grey"> 发布时间： </view>
						<view class="">
							{{ list[0].createTime }}
						</view>
					</view>
					<!-- 我的求购单 -->
					<view class="mt-28 flex justify-between align-end" style="flex-direction: row-reverse">
						<view class="flex align-center">
							<view class="text-grey"> 支付方式： </view>
							<view class="fontS-20 ml-16 border-r4 text-FFF" style="padding: 4rpx 12rpx" :style="{
                  background: list[0].payWay == 1 ? '#49C43C' : '#3BADFF',
                }">
								{{ list[0].payWay == 1 ? "微信" : "支付宝" }}
							</view>
						</view>
					</view>
				</view>
				<view class="px-16 py-24 bg-white border-r12 fontS-28 mb-16" v-for="(item, index) in list" :key="index"
					v-if="index > 0">
					<view class="">第{{ index }}笔售卖单</view>
					<view class="flex align-center justify-between mt-24">
						<view class="flex align-center">
							<image :src="item.createUserTemp.avatar" mode="" class="border-circle image-1"></image>
							<view class="text-32 font-700 ml-10">
								{{ item.createUserTemp.nickName }}
							</view>
						</view>
						<view class="flex align-center" @click.stop="makePhone(item.createUserTemp.phonenumber)">
							<view class="text-grey fontS-28">
								{{ item.createUserTemp.phonenumber }}
							</view>
							<image src="http://img.kxjb1319.com/gsgxStatic/icon_call@2x.png" mode=""
								class="image-1 ml-10"></image>
						</view>
					</view>

					<view class="mt-24 mb-24">
						<u-line color="#F4F4F4"></u-line>
					</view>

					<view class="flex align-center justify-between">
						<view class="">
							<view class="text-32 font-700">
								订单单价：{{ item.price }}
							</view>
							<view class="text-32 font-700"> 出售量：{{ item.nums }} </view>
							<view class="text-36 fontW-600">
								订单总额：<text style="color: #FF820E;">{{ item.totalPrice }}</text>
							</view>
						</view>
						<view class="" :style="{
                color:
                  item.state == 1
                    ? '#FF820E'
                    : item.state == 3
                    ? '#CDCDCD'
                    : item.state == 4
                    ? '#CDCDCD'
                    : '#FF820E',
              }">
							{{ stateTxt(item,2) }}
						</view>
					</view>

					<view class="flex align-center mt-48">
						<view class="text-grey"> 订单编号： </view>
						<view class="">
							{{ item.demandNo }}
						</view>
					</view>
					<view class="flex align-center">
						<view class="text-grey"> 出售时间： </view>
						<view class=""> {{ item.createTime }}</view>
					</view>

					<view class="mt-32 flex align-center">
						<view class="flex align-center flex-col">
							<view class="qrBox">
								<image :src="
                    item.payWay == 1
                      ? item.createUserTemp.wxQrCode
                      : item.createUserTemp.zfbQrCode
                  " mode="" style="width: 100%; height: 100%" @click="
                    previewImage(
                      item.payWay == 1
                        ? item.createUserTemp.wxQrCode
                        : item.createUserTemp.zfbQrCode
                    )
                  "></image>
							</view>
							<view class="text-24 font-700 mt-12 text-center"> 收款码 </view>
						</view>
						<view class="flex align-center flex-col ml-16">
							<image :src="item.payCert" mode="" v-if="item.payCert" class="u-upload__button"
								@click="previewImage(item.payCert)"></image>
							<u-upload :fileList="item.fileList" @afterRead="afterRead($event, index)"
								@delete="deletePic(item)" :name="item.id" :maxCount="1" v-else></u-upload>
							<view class="text-24 font-700 mt-12 text-center">
								上传凭证
							</view>
						</view>
					</view>

					<view class="mt-24 flex align-center" style="flex-direction: row-reverse"
						v-if="item.state == 0 && !item.payCert">
						<view class="uploadBtn fontS-28 text-FFF text-center ml-20" @click="uploadvoucher(item)">
							确定提交
						</view>
						<!-- 	<view class="withdrawal fontS-28 text-FFF text-center" v-if="item.state == 1">
							我要撤单
						</view> -->
					</view>
				</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				pid: null,
				// 求购
				asktabsList: [{
						label: "待接单",
						value: 0,
					},
					{
						label: "进行中",
						value: 1,
					},
					{
						label: "已完成",
						value: 2,
					},
					{
						label: "已过期",
						value: 3,
					},
					{
						label: "已取消",
						value: 4,
					},
				],
				// 出售
				sellTabsList: [{
						label: "待付款",
						value: 0,
					},
					{
						label: "待确认",
						value: 1,
					},
					{
						label: "已完成",
						value: 2,
					},
					{
						label: "已过期",
						value: 3,
					},
				],
			};
		},
		onLoad(e) {
			this.pid = e.id;
			this.refresh();
		},
		methods: {
			previewImage(img) {
				uni.previewImage({
					urls: [img],
				});
			},
			stateTxt(item, index) {
				let value;
				if (index == 1) {
					this.asktabsList.forEach(i => {
						if (i.value == item.state) {
							value = i.label
						}
					})
				}
				if (index == 2) {
					this.sellTabsList.forEach(i => {
						if (i.value == item.state) {
							value = i.label
						}
					})
				}
				return value;
			},
			async uploadvoucher(item) {
				console.log(item.fileList);
				if (item.fileList.length == 0) {
					this.$modal.msg("请先上传支付凭证!");
					return;
				}
				const res = await this.$Api.currency.marketDemand({
					id: item.id,
					payCert: item.fileList[0].url,
					state: 1
				});
				this.$modal.msg("上传成功!");
				this.refresh();
			},
			async afterRead(event, index) {
				console.log(event.file.url, "event");
				const res = await this.$Api.common.uploadFile(event.file.url);
				console.log(res, "上传");
				this.list[index].fileList.push({
					url: res.url,
				});
			},
			deletePic(e) {
				e.fileList = [];
			},
			makePhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					this.$Api.currency.sellDemandList({
						pid: this.pid,
					}).then((res) => {
						console.log(res, "市场列表");
						res.data.forEach(item => {
							item.fileList = []
						})
						this.list = res.data;
						pullScroll.finish();
					});
				}, 500);
			},
		},
	};
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.mask {
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background: #F8F8F8;
		position: absolute;
		left: 0;
		top: 0;
	}

	/deep/ .u-upload__button {
		width: 144rpx !important;
		height: 144rpx !important;
		margin: 0;
	}

	.navTop {
		height: 424rpx;
		background: url("http://img.kxjb1319.com/gsgxStatic/Marketlist/bg@2x.png") 0 0 no-repeat;
		background-size: 100% 100%;
		padding-top: 200rpx;

		.selectBox {
			width: 686rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #b4db77 0%, #89bf35 100%);
			border-radius: 48rpx;
			margin: 0 auto;
			position: relative;

			view {
				width: 50%;
				height: 100%;
				text-align: center;
				line-height: 96rpx;
				font-size: 28rpx;
				position: relative;
				z-index: 99;
			}

			.shade {
				width: 334rpx;
				height: 80rpx;
				background: #ffffff;
				box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.302);
				position: absolute;
				top: 8rpx;
				z-index: 9;
				border-radius: 40rpx;
				transition: 0.5s;
			}
		}
	}

	.withdrawal {
		width: 192rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #ffb23a 0%, #ff5617 100%);
		border-radius: 30rpx;
		line-height: 60rpx;
	}

	.image-1 {
		width: 56rpx;
		height: 56rpx;
	}

	.qrBox {
		width: 144rpx;
		height: 144rpx;
		background: #fafff5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 2rpx solid #728619;
	}

	.uploadBtn {
		width: 192rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #ffb23a 0%, #ff5617 100%);
		border-radius: 30rpx;
		line-height: 60rpx;
	}
</style>